<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 800px;
            height: 800px;

            overflow: auto;
            /* 子元素溢出会有滚动条 */
/* 
            border: 10px red double;

            padding: 100px; */

            background-color: blue;
            background-image: url("../exercise/img/詹园5.JPG");
            background-repeat: no-repeat;
          
          /* 
            设置背景的范围
                background-clip
                    可选值:
                        border-box 默认值,背景会出现在边框的下边
                        padding-box 背景不会出现在边框,只出现在内容区和内边距
                        content-box 背景只会出现在内容区
                background-origin 背景图片计算偏移量的原点
                        可选值 ：
                            padding-box 默认值 从内边距处开始计算
                            content-box 背景图片和偏移量从内容区计算
                            border-box 背景图片原点从边框处开始计算
                
           */
           background-clip: content-box;

           background-origin: border-box;

           background-size: contain;
           /* 设置背景图片的大小
                第一个表示宽度
                第二个表示高度
            
                如果只写一个，第二个值默认是auto
                第二个值是auto是等比例

                cover 图片的比例不变，将元素铺满 
                contain 图片比例不变，将图片在元素中完整显示
            */
         }
           
            .box2{

                width: 300px;
                height: 1000px;
                
         
                background-image: url(../exercise/img/蚁人.jpg);
                background-repeat: no-repeat;
                background-size:100px 100px ;

            

                background-attachment: fixed;
                /* 
                    background-attachment
                        -背景图片是否跟随元素移动
                        -可选值：
                            scroll 默认值，背景图片跟着滚动条动
                            fixed 元素固定在页面中，不会随着元素改变
                 */
                
                    /* 
                    
                    background-color
                    background-img
                    background-repeat       是否重复
                    background-size         背景图片大小
                    background-position     相对于原点位置，可以九宫格形式
                    background-clip         背景范围
                    background-origin       背景原点
                    background-attachment   是否滚动
                    
                    background 背景的简写属性
                        注意：
                            background-size必须写在background-position的后面，并且使用/隔开
                                background-position/background-size

                                background-origin background-clip两个样式 ，origin要在clip的前边
                    
                    
                    
                    
                    
                    
                    
                     */
            }   

        
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2" style="height: 1200px;" ></div>

    </div>
</body>
</html>